<template>
  <div class="toiAccount">
    <div class="account_top">
      <div class="input_one">
        <span>编号：</span>
        <a-input v-model="form1.accountNum" style="width: 75%" />
      </div>
      <div class="input_one">
        <span>公司名称：</span>
        <a-input v-model="form1.accountName" style="width: 75%" />
      </div>
      <div class="account_center">
        <a-button type="primary" @click="reload"> 重置 </a-button>
        <a-button @click="search">查询</a-button>
      </div>
    </div>
    <div class="account_bottom">
      <div class="bottom_top">
        <a-button
          type="primary"
          icon="plus"
          style="margin-right: 30px"
          @click="showModal"
        >
          新建
        </a-button>
      </div>
      <div class="tottom_table">
        <a-table
          :columns="columns"
          :data-source="data"
          :pagination="false"
          :bordered="true"
          :scroll="{ x: 'max-content' }"
          :rowKey="(record, index) => index"
        > 
          <template slot="action" slot-scope="text, record">
            <a  style="margin-right:12px" @click="() => watchInfo(record.number)">查看</a>
            <a  @click="() => changeInfo(record.number)">修改</a>
          </template>
        </a-table>
        <a-pagination v-model="current" size="small" :pageSize="pageSize" @change="currentpage" showQuickJumper  :total="total" show-less-items style="text-align: right;margin-top: 15px;" />
      </div>
    </div>
    <a-modal v-model="visible" title="新建台账" @cancel="handleCancel" @ok="handleOk" :width="'50%'" ok-text="确认" cancel-text="取消">
      <a-collapse :defaultActiveKey="['1', '2', '3']">
        <a-collapse-panel key="1" header="基本信息">
          <div class="inputAll" style="display: flex;justify-content: space-between;flex-wrap: wrap;">
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">编号：</span>
              <a-input v-model="form2.id" style="width:70%" disabled/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">名称：</span>
              <a-select style="width: 70%" @change="handleChange" >
                <a-select-option :value="item" v-for="(item,index) in departName" :key="item+index">
                  {{item}}
                </a-select-option>
              </a-select>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">所属部门：</span>
              <a-input v-model="form2.department" style="width:70%" disabled/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">设备类型：</span>
              <a-input v-model="form2.type" style="width:70%" disabled/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">地址：</span>
              <a-input v-model="form2.address" style="width:70%" disabled/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">经度：</span>
              <a-input v-model="form2.longitude" style="width:70%" disabled/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">纬度：</span>
              <a-input v-model="form2.latitude" style="width:70%" disabled/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">图片：</span>
              <img :src="form2.image" alt="" style="width:50px;height:50px">
            </div>
          </div>
        </a-collapse-panel>
        <a-collapse-panel
          key="2"
          header="特定信息"
          :disabled="false"
        >
          <div class="inputAll" style="display: flex;justify-content: space-between;flex-wrap: wrap;">
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">启用状态：</span>
              <a-select style="width: 70%" v-model="form3.status">
                <a-select-option :value="item" v-for="(item,index) in toiStates" :key="item+index">
                  {{item}}
                </a-select-option>
              </a-select>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">开放时间：</span>
              <a-time-picker v-model="form3.open_time" :default-value="moment('00:00', 'HH:mm')" format="HH:mm" value-format="HH:mm"  style="width:70%"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">关闭时间：</span>
              <a-time-picker v-model="form3.close_time" :default-value="moment('00:00', 'HH:mm')" format="HH:mm" value-format="HH:mm" style="width:70%"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">占地面积：</span>
              <a-input style="width:70%" v-model="form3.floor_space"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">建筑面积：</span>
              <a-input style="width:70%" v-model="form3.covered_area"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">建成时间：</span>
              <a-date-picker v-model="form3.finish_time" value-format="yyyy-MM-DD"  style="width: 70%;"/>
            </div>
          </div>
        </a-collapse-panel>
        <a-collapse-panel key="3" header="内部信息">
          <div class="inputAll" style="display: flex;justify-content: space-between;flex-wrap: wrap;">
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">男厕坑位：</span>
              <a-input-number :min="1" :max="50"  style="width:70%" v-model="form3.man_squat_count"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">男厕站位：</span>
              <a-input-number :min="1" :max="50" style="width:70%" v-model="form3.man_stand_count"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">女厕蹲位：</span>
              <a-input-number :min="1" :max="50" style="width:70%" v-model="form3.woman_squat_count"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;margin-bottom:10px">
              <span style="display: inline-block;width: 35%;text-align:right">第三卫生间：</span>
              <a-radio-group v-model="form3.is_third_toilet">
                <a-radio :value="true">
                  有
                </a-radio>
                <a-radio :value="false">
                  无
                </a-radio>
              </a-radio-group>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">工作人数：</span>
              <a-input-number :min="1" :max="50" style="width:70%" v-model="form3.work_count"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">监督电话：</span>
              <a-input style="width:70%" v-model="form3.supervisory_telephone"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">责任人：</span>
              <a-input style="width:70%" v-model="form3.principal"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">联系电话：</span>
              <a-input style="width:70%" v-model="form3.principal_telephone"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">WIFI：</span>
              <a-radio-group v-model="form3.is_WIFI">
                <a-radio :value="true">
                  有
                </a-radio>
                <a-radio :value="false">
                  无
                </a-radio>
              </a-radio-group>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">无障碍室：</span>
              <a-radio-group v-model="form3.is_barriers_room">
                <a-radio :value="true">
                  有
                </a-radio>
                <a-radio :value="false">
                  无
                </a-radio>
              </a-radio-group>
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </a-modal>
    <a-modal v-model="visible1" title="查看公共厕所" :width="'50%'" >
      <a-collapse :defaultActiveKey="['1', '2', '3']">
        <a-collapse-panel key="1" header="基本信息">
          <div class="inputAll" style="display: flex;justify-content: space-between;flex-wrap: wrap;">
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">编号：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].id}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">名称：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].name}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">所属部门：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].department}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">设备类型：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].type}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">地址：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].address}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">经度：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].longitude}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">纬度：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].latitude}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">图片：</span>
              <img :src="dataOne[0].image" alt="" style="width:50px;height:50px">
            </div>
          </div>
        </a-collapse-panel>
        <a-collapse-panel
          key="2"
          header="特定信息"
          :disabled="false"
        >
          <div class="inputAll" style="display: flex;justify-content: space-between;flex-wrap: wrap;">
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">启用状态：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].status}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">开放时间：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].open_time}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">关闭时间：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].close_time}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">占地面积：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].floor_space}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">建筑面积：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].covered_area}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">建成时间：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].finish_time}}</span>
            </div>
          </div>
        </a-collapse-panel>
        <a-collapse-panel key="3" header="内部信息">
          <div class="inputAll" style="display: flex;justify-content: space-between;flex-wrap: wrap;">
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">男厕坑位：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].man_squat_count}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">男厕站位：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].man_stand_count}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">女厕蹲位：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].woman_squat_count}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;margin-bottom:10px">
              <span style="display: inline-block;width: 35%;text-align:right">第三卫生间：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].is_third_toilet}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">工作人数：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].work_count}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">监督电话：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].supervisory_telephone}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">责任人：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].principal}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">联系电话：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].principal_telephone}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">WIFI：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].is_WIFI}}</span>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">无障碍室：</span>
              <span style="display: inline-block;width: 65%;">{{dataOne[0].is_barriers_room}}</span>
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </a-modal>
    <a-modal v-model="visible2" title="修改台账" @ok="handleOk2" :width="'50%'" ok-text="确认" cancel-text="取消">
      <a-collapse :defaultActiveKey="['1', '2', '3']">
        <a-collapse-panel key="1" header="基本信息">
          <div class="inputAll" style="display: flex;justify-content: space-between;flex-wrap: wrap;">
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">编号：</span>
              <a-input v-model="dataOne[0].id" style="width:70%" disabled/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">名称：</span>
              <a-input v-model="dataOne[0].name" style="width:70%" disabled/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">所属部门：</span>
              <a-input v-model="dataOne[0].department" style="width:70%" disabled/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">设备类型：</span>
              <a-input v-model="dataOne[0].type" style="width:70%" disabled/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">地址：</span>
              <a-input v-model="dataOne[0].address" style="width:70%" disabled/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">经度：</span>
              <a-input v-model="dataOne[0].longitude" style="width:70%" disabled/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">纬度：</span>
              <a-input v-model="dataOne[0].latitude" style="width:70%" disabled/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">图片：</span>
              <img :src="dataOne[0].image" alt="" style="width:50px;height:50px">
            </div>
          </div>
        </a-collapse-panel>
        <a-collapse-panel
          key="2"
          header="特定信息"
          :disabled="false"
        >
          <div class="inputAll" style="display: flex;justify-content: space-between;flex-wrap: wrap;">
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">启用状态：</span>
              <a-select style="width: 70%" v-model="dataOne[0].status">
                <a-select-option :value="item" v-for="(item,index) in toiStates" :key="item+index">
                  {{item}}
                </a-select-option>
              </a-select>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">开放时间：</span>
              <a-time-picker v-model="dataOne[0].open_time" :default-value="moment('00:00', 'HH:mm')" format="HH:mm" value-format="HH:mm"  style="width:70%"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">关闭时间：</span>
              <a-time-picker v-model="dataOne[0].close_time" :default-value="moment('00:00', 'HH:mm')" format="HH:mm" value-format="HH:mm" style="width:70%"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">占地面积：</span>
              <a-input style="width:70%" v-model="dataOne[0].floor_space"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">建筑面积：</span>
              <a-input style="width:70%" v-model="dataOne[0].covered_area"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">建成时间：</span>
              <a-date-picker v-model="dataOne[0].finish_time" value-format="yyyy-MM-DD"  style="width: 70%;"/>
            </div>
          </div>
        </a-collapse-panel>
        <a-collapse-panel key="3" header="内部信息">
          <div class="inputAll" style="display: flex;justify-content: space-between;flex-wrap: wrap;">
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">男厕坑位：</span>
              <a-input-number :min="1" :max="50"  style="width:70%" v-model="dataOne[0].man_squat_count"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">男厕站位：</span>
              <a-input-number :min="1" :max="50" style="width:70%" v-model="dataOne[0].man_stand_count"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">女厕蹲位：</span>
              <a-input-number :min="1" :max="50" style="width:70%" v-model="dataOne[0].woman_squat_count"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;margin-bottom:10px">
              <span style="display: inline-block;width: 35%;text-align:right">第三卫生间：</span>
              <a-radio-group v-model="dataOne[0].is_third_toilet">
                <a-radio :value="true">
                  有
                </a-radio>
                <a-radio :value="false">
                  无
                </a-radio>
              </a-radio-group>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">工作人数：</span>
              <a-input-number :min="1" :max="50" style="width:70%" v-model="dataOne[0].work_count"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">监督电话：</span>
              <a-input style="width:70%" v-model="dataOne[0].supervisory_telephone"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">责任人：</span>
              <a-input style="width:70%" v-model="dataOne[0].principal"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">联系电话：</span>
              <a-input style="width:70%" v-model="dataOne[0].principal_telephone"/>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">WIFI：</span>
              <a-radio-group v-model="dataOne[0].is_WIFI">
                <a-radio :value="true">
                  有
                </a-radio>
                <a-radio :value="false">
                  无
                </a-radio>
              </a-radio-group>
            </div>
            <div class="inputOneee" style="width: 45%;display: flex;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">无障碍室：</span>
              <a-radio-group v-model="dataOne[0].is_barriers_room">
                <a-radio :value="true">
                  有
                </a-radio>
                <a-radio :value="false">
                  无
                </a-radio>
              </a-radio-group>
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment';
import {getFacilityData,searchAccount,createNewAccount} from '../../api'
export default {
  data() {
    return {
      moment,
      form1:{
        accountNum:'',
        accountName:''
      },
      form2: {
        id: '',
        depName:'',
        department: '',
        type: '',
        address: '',
        longitude: '',
        latitude: '',
        image: '',
      },
      form3:{
        base_facility:'',
        status:'',
        open_time:'00:00',
        close_time:'00:00',
        floor_space:'',
        covered_area:'',
        finish_time:'',
        man_squat_count:'',
        man_stand_count:'',
        woman_squat_count:'',
        is_third_toilet:'',
        work_count:'',
        supervisory_telephone:'',
        principal:'',
        principal_telephone:'',
        is_WIFI:'',
        is_barriers_room:'',
      },
      columns: [
        {
          title: "序号",
          dataIndex: "id",
        },
        {
          title: "编号",
          dataIndex: "number",
        },
        {
          title: "公厕名称",
          dataIndex: "name",
        },
        {
          title: "等级",
          dataIndex: "level",
        },
        {
          title: "详细地址",
          dataIndex: "address",
        },
        {
          title: "建筑面积(㎡)",
          dataIndex: "covered_area",
        },
        {
          title: "男厕蹲位",
          dataIndex: "man_squat_count",
        },
        {
          title: "男厕站位",
          dataIndex: "man_stand_count",
        },
        {
          title: "女厕蹲位",
          dataIndex: "woman_squat_count",
        },
        {
          title: "状态",
          dataIndex: "status",
        },
        {
          title: "无障碍室",
          dataIndex: "is_barriers_room",
        },
        {
          title: "第三卫生间",
          dataIndex: "is_third_toilet",
        },
        {
          title: "监督电话",
          dataIndex: "principal_telephone",
        },
        {
          title: "最后更新时间",
          dataIndex: "update_time",
        },
        {
          title: "操作",
          fixed: "right",
          width: 120,
          scopedSlots: { customRender: "action" },
        },
      ],
      data:[],
      dataOne:[
        {
          id:'',
          base_facility:'',
          status:'',
          open_time:'',
          close_time:'',
          floor_space:'',
          covered_area:'',
          finish_time:'',
          man_squat_count:'',
          man_stand_count:'',
          woman_squat_count:'',
          is_third_toilet:'',
          work_count:'',
          supervisory_telephone:'',
          principal:'',
          principal_telephone:'',
          is_WIFI:'',
          is_barriers_room:'',
          name:'',
          address:'',
          longitude:'',
          latitude:'',
          image:'',
          type:'',
          department:'',
        }
      ],
      selectedRowKeys: [],
      loading: false,
      visible: false,
      visible1:false,
      visible2:false,
      current:1,
      pageSize:10,
      total:0,
      departName:[],
      toiStates:['正常启用','临时关闭','长期关闭','在建']
    };
  },
  mounted(){
    this.getAccountData()
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      if(this.form2.id){
        this.form3.base_facility = this.form2.id
        createNewAccount(this.form3).then(res=>{
          if(res=='创建成功'){
            this.$message.success('创建成功')
          }else if(res=='修改成功'){
            this.$message.success('已有表，修改成功')
          }
          this.form2 = {}
          this.form3 = {}
          this.visible = false;
          this.getAccountData()
        })
        return
      }
      this.visible = false;
    },
    handleCancel(){
      this.form2 = {}
      this.form3 = {}
      this.visible = false;
    },
    async getAccountData(){
      let page = this.current
      let page_size = this.pageSize
      let res = await getFacilityData(page,page_size)
      this.total = res.count
      this.data = res.results
      this.departName = []
      this.data.map(item=>{
        switch (item.level) {
          case '1':
            item.level = '一级'
            break;
          case '1':
            item.level = '二级'
            break;
          case '1':
            item.level = '三级'
            break;
          default:
            break;
        }
        item.is_third_toilet?item.is_third_toilet='有':item.is_third_toilet="无"
        item.is_barriers_room?item.is_barriers_room='有':item.is_barriers_room="无"
        this.departName.push(item.name)
      })
    },
    async search(){
      if(this.form1.accountNum==''&&this.form1.accountName=='') return
      this.current = 1
      let page = this.current
      let page_size = this.pageSize
      let name = this.form1.accountName
      let number = this.form1.accountNum
      let res = await searchAccount(number,name,page,page_size)
      this.total = res.count
      this.data = res.results
      this.data.map(item=>{
        switch (item.level) {
          case '1':
            item.level = '一级'
            break;
          case '2':
            item.level = '二级'
            break;
          case '3':
            item.level = '三级'
            break;
          default:
            break;
        }
        item.is_third_toilet?item.is_third_toilet='有':item.is_third_toilet="无"
        item.is_barriers_room?item.is_barriers_room='有':item.is_barriers_room="无"
      })
    },
    async searchOne(number){
      let res = await searchAccount(number)
      this.dataOne = res.results
      this.dataOne.map(item=>{
        switch (item.level) {
          case '1':
            item.level = '一级'
            break;
          case '2':
            item.level = '二级'
            break;
          case '3':
            item.level = '三级'
            break;
          default:
            break;
        }
        item.is_third_toilet?item.is_third_toilet='有':item.is_third_toilet="无"
        item.is_barriers_room?item.is_barriers_room='有':item.is_barriers_room="无"
      })
    },
    reload(){
      this.current = 1
      this.form1 = {}
      this.current = 1
      this.getAccountData()
    },
    currentpage(val){
        this.current = val
        this.getAccountData()
    },
    handleChange(value) {
      let name = value
      let number = ''
      searchAccount(number,name).then(res=>{
        this.form2 = res.results[0]
      })
    },
    watchInfo(number){
      this.searchOne(number)
      this.visible1 = true
    },
    changeInfo(number){
      this.searchOne(number)
      this.visible2 = true
    },
    handleOk2(){
      let that = this
      let number = that.dataOne[0].id
      that.dataOne[0]['base_facility'] = number
      delete that.dataOne[0].id
      delete that.dataOne[0].area
      delete that.dataOne[0].name
      delete that.dataOne[0].number
      delete that.dataOne[0].address
      delete that.dataOne[0].longitude
      delete that.dataOne[0].create_time
      delete that.dataOne[0].longitude
      delete that.dataOne[0].latitude
      delete that.dataOne[0].image
      delete that.dataOne[0].type
      delete that.dataOne[0].level
      delete that.dataOne[0].project
      delete that.dataOne[0].department
      createNewAccount(that.dataOne[0]).then(res=>{
        this.$message.success('修改成功')
        this.visible2 = false
        this.getAccountData()
      })
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
};
</script>

<style lang="less">
.toiAccount {
  padding: 24px;
  .account_top {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    .input_one {
      width: 33.33%;
      margin: 10px 0 10px 0;
      span {
        width: 25%;
        display: inline-block;
        text-align: right;
      }
    }
    .account_center {
      margin-top: 10px;
      width: 33.33%;
      text-align: right;
    }
  }
  .account_bottom {
    .bottom_top {
      margin: 50px 0 30px 0;
    }
  }
  .table {
    :global {
      .ant-table-thead > tr > th {
        background: #fff !important;
        white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
      }
      .ant-table-tbody > tr > td {
        white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
      }
    }
  }
  .ss {
    span {
      width: 100% !important;
    }
  }
}
</style>